import React from "react";
import './TodoFooter.css';
//1. 导入 useDispatch
import { useDispatch } from "react-redux";
import { checkAllTodo, removeDoneTodo } from "../../redux/reducers/todoReducer";
import { useSelector } from "react-redux";
export default function TodoFooter() {
  //2. 获得 dispatch
  let dispatch = useDispatch();
  //获得 todo 的状态
  let todo = useSelector(state => state.todo);

  //声明事件回调 更新
  let check = (e) => {
    //3. 分发任务 更新状态
    dispatch(checkAllTodo(e.target.checked))
  }

  //声明函数 事件回调  删除
  let clean = () => {
    dispatch(removeDoneTodo());
  }

  return (
    <div className="todo-footer">
      <label>
        <input checked={todo.every(item => item.done) && todo.length > 0} type="checkbox" onChange={check} />
      </label>
      <span>
        <span>已完成 {todo.filter(item => item.done).length}</span> / 全部 {todo.length}
      </span>
      <button className="btn btn-danger" onClick={clean}>清除已完成任务</button>
    </div>
  );
}
